To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to customize star rating inputs.
Number of Stars
By default, the b-form-rating displays 5 stars.
We can change the number if starts to display with the stars prop.
For instance, we can write:
<template>
<div id="app">
<b-form-rating v-model="value" stars="8"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 6
};
}
};
</script>
We set stars to 8, so we see 8 stars.
Show Stars Value
The show-value prop lets us show the value of the stars.
For example, we can write:
<template>
<div id="app">
<b-form-rating v-model="value" show-value></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0
};
}
};
</script>
Then when we click the stars, we see how many stars we set.
Precision
The stars don’ have to always increment by 1.
We can change the precision by using the show-value-precision prop.
For instance, we can write:
<template>
<div id="app">
<b-form-rating v-model="value" readonly show-value precision="2"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 3.5
};
}
};
</script>
Then we can display star value to 2 decimal places.
However, we can’t select a part of a star.
Show Maximum Value
We can use the show-value-max prop to show the maximum value of the stars.
For instance, we can write:
<template>
<div id="app">
<b-form-rating v-model="value" readonly show-value show-value-max precision="2"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 3.5
};
}
};
</script>
We have the show-value and show-value-max props to display the selected and maximum star values respectively.
Sizing
Like other components, we can change the sizing of the star rating component with the size prop.
The value can be 'sm' or ’lg' ,
For example, we can write:
<template>
<div id="app">
<b-form-rating v-model="value" size="sm"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 3.5
};
}
};
</script>
and we get extra small stars.
'lg' will make the stars extra large.
Make Stars Inline
The stars can be made inline with the inline prop.
For instance, we can write:
<template>
<div id="app">
<b-form-rating inline value="4"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 4
};
}
};
</script>
Then the rating component will be displayed inline.
Borderless
The star rating component has a border by default.
We can remove it with the no-border prop.
For example, we can write:
<template>
<div id="app">
<b-form-rating no-border value="4"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 4
};
}
};
</script>
Now there’s no border displayed.
Disable Input
We can stop users from selecting ratings by using the disabled prop.
For instance, we write:
<template>
<div id="app">
<b-form-rating disabled value="4"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 4
};
}
};
</script>
Make Stars Read Only
We can make the stars component read-only, which means it’s focusable but we can’t choose anything.
For example, we can write:
<template>
<div id="app">
<b-form-rating readonly value="4"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 4
};
}
};
</script>
Conclusion
There are lots of customization options for the star rating component.
The icons can be changed.
We add half-filled icons. Also, we can add a clear button to clear the ratings.
